<template>
  <view class="latest-detail">
    <view class="card">
      <!-- 标题 -->
      <view class="title">{{ item.title || '求购标题' }}</view>

      <!-- 顶部信息行 -->
      <view class="meta">
        <text>发布时间：{{ displayTime }}</text>
        <text class="area">{{ item.area || '江苏省苏州市昆山市' }}</text>
      </view>
      <view class="meta">
        <text>采购人：{{ maskedName }}</text>
        <text>电话：{{ item.phone || '137****6682' }}</text>
      </view>
      <view class="meta">
        <text>采购数量：{{ item.qty || 1 }}</text>
      </view>

      <!-- 价格行 -->
      <view class="price-row">
        <view class="price-item">
          <text class="label">商机价格：</text>
          <text class="value good">¥ {{ bizPrice }}</text>
          <text class="unit">/条</text>
        </view>
        <view class="price-item">
          <text class="label">买断价：</text>
          <text class="value bad">¥ {{ cutPrice }}</text>
        </view>
      </view>

      <!-- 需求关键词 -->
      <view class="keywords">{{ item.keyword || item.title }}</view>

      <!-- 进度条 -->
      <view class="progress">
        <view class="bar">
          <view class="fill" :style="{ width: progressPct + '%' }"></view>
        </view>
        <text class="progress-text">{{ joined }}/{{ limit }}</text>
      </view>

      <!-- 按钮 -->
      <view class="btns">
        <view class="btn primary" @click="takeOrder">立即接单</view>
        <view class="btn warn" @click="buyOut">买断名额</view>
      </view>

      <!-- 免责声明 -->
      <view class="notice">
        免责声明：以上所展示的信息由企业自行提供，内容的真实性、准确性和合法性由发布企业负责，惠机优选平台对此不承担任何保证责任。
      </view>

      <!-- 二维码与分享 -->
      <view class="qrcode-wrap">
        <view class="qrcode-placeholder">小程序码</view>
        <view class="share-text">保存到相册，分享给好友或朋友圈</view>
        <view class="share-btns">
          <view class="mini-btn" @click="save">保存</view>
          <view class="mini-btn" @click="share">分享</view>
        </view>
      </view>

    </view>
    <!-- 确认弹窗 -->
    <view v-if="showConfirm" class="modal-mask" @touchmove.stop.prevent>
      <view class="modal">
        <view class="modal-title">提示</view>
        <view class="modal-msg">{{ confirmMsg }}</view>
        <view class="modal-actions">
          <view class="modal-btn cancel" @click="onCancel">取消</view>
          <view class="modal-btn ok" @click="onConfirm">确定</view>
        </view>
      </view>
    </view>
  </view>
  </template>

<script>
export default {
  name: 'LatestDetail',
  data(){
    return {
      item: {},
      displayTime: '',
      limit: 3,
      joined: 0,
      bizPrice: '50.00',
      cutPrice: '150.00',
      showConfirm: false,
      confirmMsg: '',
      confirmType: ''
    }
  },
  onLoad(query){
    try{
      if(query && query.data){
        this.item = JSON.parse(decodeURIComponent(query.data))
      }
    }catch(e){
      this.item = {}
    }
    const d = new Date()
    const pad = n=> (n<10? '0'+n : ''+n)
    this.displayTime = `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`
  },
  methods:{
    callPhone(){
      if(!this.item.phone){
        return uni.showToast({ title: '暂无电话', icon: 'none' })
      }
      uni.makePhoneCall({ phoneNumber: this.item.phone.replace(/\*/g,'') })
    },
    takeOrder(){
      this.confirmType = 'take'
      this.confirmMsg = `即将花费${this.bizPrice}元购买单次商机`
      this.showConfirm = true
    },
    buyOut(){
      this.confirmType = 'buy'
      this.confirmMsg = `将花费${this.cutPrice}元买断本条商机`
      this.showConfirm = true
    },
    onConfirm(){
      this.showConfirm = false
      if(this.confirmType === 'take'){
        this.joined = Math.min(this.limit, this.joined + 1)
        uni.showToast({ title: '已申请接单', icon: 'success' })
      }else if(this.confirmType === 'buy'){
        this.joined = this.limit
        uni.showToast({ title: '买断成功(示例)', icon: 'success' })
      }
    },
    onCancel(){ this.showConfirm = false },
    save(){ uni.showToast({ title: '已保存(示例)', icon: 'none' }) },
    share(){ uni.showToast({ title: '已分享(示例)', icon: 'none' }) }
  }
}
</script>

<style lang="scss" scoped>
.modal-mask{ position: fixed; left:0; top:0; right:0; bottom:0; background: rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; z-index: 999; }
.modal{ width: 640rpx; background:#fff; border-radius: 16rpx; overflow:hidden; }
.modal-title{ text-align:center; padding: 24rpx 0; font-size: 30rpx; color:#333; border-bottom:1rpx solid #f0f0f0; }
.modal-msg{ padding: 40rpx 30rpx; text-align:center; color:#666; font-size: 28rpx; }
.modal-actions{ display:flex; border-top:1rpx solid #f0f0f0; }
.modal-btn{ flex:1; height: 88rpx; display:flex; align-items:center; justify-content:center; font-size: 30rpx; }
.modal-btn.cancel{ color:#666; }
.modal-btn.ok{ color:#3cc51f; font-weight:600; }
.latest-detail{ background:#f6f7f9; min-height:100vh; padding: 20rpx; }
.card{ background:#fff; border-radius:16rpx; padding: 24rpx; box-shadow:0 2rpx 8rpx rgba(0,0,0,.05); }
.title{ font-size: 34rpx; color:#222; font-weight: 700; line-height: 1.5; }
.meta{ display:flex; align-items:center; justify-content:space-between; margin-top: 10rpx; color:#666; font-size: 24rpx; }
.area{ color:#333; }
.price-row{ display:flex; align-items:center; justify-content:space-between; padding: 18rpx 0; }
.price-item{ display:flex; align-items:baseline; }
.price-item .label{ color:#666; font-size: 26rpx; }
.price-item .value{ font-size: 30rpx; font-weight: 700; margin: 0 6rpx; }
.price-item .unit{ color:#666; font-size: 24rpx; }
.good{ color:#ff3b30; }
.bad{ color:#ff6b00; }
.keywords{ color:#ff6b00; margin: 6rpx 0 10rpx; text-decoration: underline; font-size: 28rpx; }
.progress{ display:flex; align-items:center; justify-content:space-between; }
.bar{ flex:1; height: 12rpx; background:#eee; border-radius: 8rpx; overflow:hidden; margin-right: 10rpx; }
.fill{ height:100%; background:#3cc51f; width:0; }
.progress-text{ color:#666; font-size: 24rpx; }
.btns{ display:flex; align-items:center; justify-content:space-between; margin: 24rpx 0; }
.btn{ flex:1; height: 88rpx; border-radius: 12rpx; font-size: 30rpx; display:flex; align-items:center; justify-content:center; }
.btn.primary{ background:#e84c3d; color:#fff; margin-right: 16rpx; }
.btn.warn{ background:#ffd24a; color:#5c3c00; }
.notice{ color:#999; font-size: 22rpx; line-height: 1.7; }
.qrcode-wrap{ margin-top: 30rpx; display:flex; flex-direction:column; align-items:center; }
.qrcode-placeholder{ width: 360rpx; height: 360rpx; border: 2rpx dashed #ccc; border-radius: 16rpx; display:flex; align-items:center; justify-content:center; color:#aaa; }
.share-text{ color:#666; font-size: 24rpx; margin-top: 16rpx; }
.share-btns{ display:flex; gap: 20rpx; margin-top: 20rpx; }
.mini-btn{ width: 160rpx; height: 64rpx; background:#f5f5f5; border-radius: 10rpx; display:flex; align-items:center; justify-content:center; color:#333; }
</style>
